<script>
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  computed,
  onBeforeUnmount,
  ref,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "@/store/modules/user.js";
import { editUserPassword } from "@/api/user.js";
import { getPluginDown } from "@/api/file.js";

export default defineComponent({
  name: "TopMenu",
  props: {
    menuList: {
      type: Array,
      default: () => {
        return [
          { title: "预览", redirect: "/preview" },
          { title: "回放", redirect: "/playback" },
          { title: "图片", redirect: "/image" },
          { title: "配置", redirect: "/allocation" },
        ];
      },
    },
    defaultIndex: {
      type: Number,
      default: 0,
    },
  },
  setup(props) {
    const state = reactive({
      current: -1,
      name: "管理员",
      menuList: [
        { title: "预览", redirect: "/preview" },
        { title: "回放", redirect: "/playback" },
        { title: "图片", redirect: "/image" },
        { title: "配置", redirect: "/allocation" },
      ],
    });

    const router = useRouter();
    const route = useRoute();

    const store = useUserStore();

    const passForm = ref(null);

    onMounted(() => {
      state.current = route.meta["topCurrent"] || props.defaultIndex;
      router.push(props.menuList[state.current]["redirect"]);
      state.name = store.username;
    });

    const reactList = computed(() => {
      if (store.userType === "0") {
        let list = state.menuList.splice(0, 3);
        return list;
      } else {
        return state.menuList;
      }
    });

    const handleTopMenuChange = (index) => {
      state.current = index;
      router.push(props.menuList[state.current]["redirect"]);
    };

    //用户登出
    const userLogout = () => {
      store.userLogout().then(() => {
        console.log(1);
        router.push({ path: "/" });
      });
    };

    //修改密码
    const editPassword = () => {
      if (route.path === "/allocation/system") {
        store.count = 1;
        return;
      }
      router.push({ path: "/allocation/system", query: { index: 3 } });
    };

    //插件下载
    const downPlugin = async () => {
      await getPluginDown().then((res) => {
        let url = window.URL.createObjectURL(new Blob([res]));
        let a = document.createElement("a");
        a.style.display = "none";
        a.href = url;
        let title = "setup.exe";
        a.setAttribute("download", title);

        document.body.appendChild(a);
        a.click(); //执行下载
        window.URL.revokeObjectURL(a.href); // 清除url
        document.body.removeChild(a); //移除dom
      });
    };

    return {
      ...toRefs(state),
      handleTopMenuChange,
      userLogout,
      editPassword,
      downPlugin,
      reactList,
    };
  },
});
</script>

<template>
  <div class="component-top-menu-container">
    <div
      class="top-menu-item"
      v-for="(item, index) in reactList"
      :key="index"
      :class="index === current ? 'active' : ''"
      @click="handleTopMenuChange(index)"
    >
      {{ item["title"] }}
    </div>
    <div class="right">
      <!-- <div class="plugins" @click="downPlugin">
        <span class="icon" />
        <span> 插件下载 </span>
      </div> -->
      <div class="userShow">
        <el-dropdown>
          <div class="iconBox">
            <span class="icon" />
            <span class="el-dropdown-link"> 欢迎您:{{ name }} </span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="editPassword"
                >修改密码</el-dropdown-item
              >
              <el-dropdown-item @click="userLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.component-top-menu-container {
  width: 100%;
  height: 36px;
  padding: 0 36px;
  user-select: none;

  .top-menu-item {
    background-color: #49555f;
    float: left;
    width: 120px;
    height: 100%;
    text-align: center;
    line-height: 36px;
    cursor: pointer;

    &.active {
      background-color: #c1272d;
    }
  }
  .right {
    float: right;
    .plugins {
      float: left;
      margin-right: 40px;
    }

    .plugins {
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      cursor: pointer;
      .icon {
        width: 20px;
        height: 20px;
        display: inline-block;
        background-image: url("../assets/components/hardware.png");
        background-size: cover;
        margin-right: 12px;
      }
    }

    .userShow {
      float: left;
      color: white;
      .el-dropdown-link {
        font-size: 16px;
        line-height: 22px;
        cursor: pointer;
        color: white;
      }

      .iconBox {
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
        cursor: pointer;

        .icon {
          width: 20px;
          height: 20px;
          display: inline-block;
          background-image: url("../assets/components/userLogo.png");
          background-size: cover;
          margin-right: 12px;
        }
      }
    }
  }
}
</style>
